<div class="left_content">
	<div class="title">
		<span class="title_icon"><img src="{bstoViewPath}images/bullet1.gif" alt="" title="" />
		</span>Register
	</div>

	<div class="feat_prod_box_details">
		<p class="details">Lorem ipsum dolor sit amet, consectetur adipisicing
			elit, sed do eiusmod tempor incididunt ut labore et dolore magna
			aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit
			amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
			ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
			nostrud.</p>

		<div class="contact_form">
			<div class="form_subtitle">create new account</div>
			<label style="color: #a53d17;">{logout}</label>
			<form id="register" name="register" action="" method="post">
				{more_field}
				<div class="form_row">
					<label class="contact"><strong>Username:</strong> </label> <input
						type="text" class="contact_input" name="username" value="{value_username}"/>
				</div>


				<div class="form_row">
					<label class="contact"><strong>Password:</strong> </label> <input
						type="password" class="contact_input" name="password1" />
				</div>
				
				<div class="form_row">
					<label class="contact"><strong>Confirm Password:</strong> </label> <input
						type="password" class="contact_input" name="password2" />
				</div>

				<div class="form_row">
					<label class="contact"><strong>Email:</strong> </label> <input
						type="text" class="contact_input {ignore}" name="email" value="{value_email}" {disabled}/>
				</div>


				<div class="form_row">
					<label class="contact"><strong>Phone:</strong> </label> <input
						type="text" class="contact_input" name="phone" value="{value_phone}"/>
				</div>

				<div class="form_row">
					<label class="contact"><strong>Company:</strong> </label> <input
						type="text" class="contact_input" name="company" value="{value_company}"/>
				</div>

				<div class="form_row">
					<label class="contact"><strong>Address:</strong> </label> <input
						type="text" class="contact_input" name="address" value="{value_address}"/>
				</div>

				<div class="form_row">
					<div class="terms">
						<input type="checkbox" name="terms" /> I agree to the <a href="#">terms
							&amp; conditions</a>						
					</div>
				</div>
                <div class="form_row">
                    <label>{username}</label>
                    <label>{password1}</label>
                    <label>{password2}</label>
                    <label>{email}</label>
                    <label>{phone}</label>
                    <label>{company}</label>
                    <label>{address}</label>
                    <label>{terms}</label>
                </div>
                <div class="errorValidate" style="color: #a53d17;"></div>
				<div class="form_row">
					<input type="submit" class="register" value="register" />
				</div>
			</form>
		</div>

	</div>






	<div class="clear"></div>
</div>
<!--end of left content-->

<script type="text/javascript" src="{bstoViewPath}js/jquery.validate.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	
	
	$.validator.addMethod(
	        "regexp",
	        function(value, element, regexp) {
	            var check = false;
	            var re = new RegExp(regexp);
	            return this.optional(element) || re.test(value);
	        },
	        "Please check your input."
	);
    $("#register").validate({
    	rules: {
			username: { required: true, regexp: "^[a-zA-Z][a-zA-Z0-9]*$"  },
			password1: { required: true },
			password2: { required: true, equalTo: 'input[name="password1"]' },
			email: { required :true, email: true },
			phone: { digits: true },
			terms: { required: true }
		},
		messages: {
			username: {
				required: "Please enter your desired username.<br/>",
				regexp: "Please choose an valid username.<br/>",
			},
			password1: {
				required: "Please enter your password.<br/>",				
			},
			password2: {
				required: "Please confirm your password.<br/>",
				equalTo:  "Passwords did not match.<br/>",
			},
			email: {
				required: "Please enter your email.<br/>",
				email: "Please use a valid email format.<br/>",
			},
			phone: {
				digits: "Please use a valid phone number.<br/>",
			},
			terms: {
				required: "Please accept terms of use to register.<br/>",
			}
		},
		errorPlacement: function(error, element){
		         // $("div.errorValidate").html(error);
				$("div.errorValidate").append(error);
		},
		submitHandler: function(form) {
			if ($("input[name='fullname']").attr("disabled")){
				$("input[name='fullname']").removeAttr("disabled");
			}
			if ($("input[name='email']").attr("disabled")){
				$("input[name='email']").removeAttr("disabled");					
			}
			
		    form.submit();
		   	//return true;
		},
    });
  });
</script>
